<template>
  <div class="hot-list-wrapper">
    <div class="hot-list-top">
       <div class="hot-list-title">
        <div class="hot-search">热门搜索</div>
        <div class="hot-more">
          <span>更多  <van-icon name="arrow" /></span>
        </div>
       </div>
       <div class="hotlist-block">
        <div class="block" v-for="item in hotSearchList" :key="item.id">
          <Cblock
            :src="item.imgUrl"
            :title="item.title"
            :price="item.price"
            :ranking="item.ranking"
            :imgHeight="80"
          ></Cblock>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cblock from '../base/block'
export default {
  props: {
    hotSearchList: {
      type: Array,
      default: []
    }
  },
  components: {
    Cblock
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
.hot-list-wrapper {
    width: 100%;
    height: 220px;
    .hot-list-top {
        height: 220px;
        width: 100%;
        .hot-list-title {
            display: flex;
            height: 30px;
            .hot-search {
                flex: 1;
                font-weight: 700;
                color: #000;
                font-size: 18px;
            }
            .hot-more {
                flex: 1;
                position: relative;
                span {
                    position: absolute;
                    right: 0px;
                    color: #ccc;
                    font-size: 14px;
                }
            }
        }
        .hotlist-block {
            display: flex;
            // background-color: pink;
            overflow: hidden;
            .block {
                display: inline-block;
                // height: 220px;
                background-color: #fff;
                margin: 6px;
                // margin-left: 4px;
                width: 30%;
                border-radius: 10px;
                box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
                .content-wrapper {
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    // background-color: yellowgreen;
                    .img-wrapper {
                        flex: 1;
                        width: 100%;
                        height: 110px;
                        overflow: hidden;
                        border-radius: 10px;
                    }
                    .block-text {
                        flex: 1;
                        .text {
                          width: 98%;
                          color: #555;
                          font-size: 12px;
                          text-align: center;
                            h4 {
                                margin: 5px;
                                margin-top: 8px;
                            }
                        }
                    }
                    .flag {
                      position: absolute;
                      top: -10px;
                      left: 10px;
                      .number {
                          position: absolute;
                          top: -1px;
                          left: 12px;
                          span {
                              font-size: 12px;
                              color: #fff;
                          }
                      }
                    }
                }
            }
        }
    }
}
</style>
